<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>学生管理系统</title>
    <link rel="stylesheet" href="<%=request.getContextPath()%>/static/layui2.4/css/layui.css">
    <style type="text/css">
        /*左侧导航*/
        .layui-tree-skin-sidebar li i {
            color: rgba(255, 255, 255, .7);
            display: none;
        }

        .layui-tree-skin-sidebar li a cite {
            color: rgba(255, 255, 255, .7)
        }

        .layui-tree-skin-sidebar li .layui-tree-spread {
            display: block;
            position: absolute;
            right: 30px;
        }

        .layui-tree-skin-sidebar li {
            line-height: 45px;
            position: relative;
        }

        .layui-tree-skin-sidebar li ul {
            margin-left: 0;
            background: rgba(0, 0, 0, .3);
        }

        .layui-tree-skin-sidebar li ul a {
            padding-left: 20px;
        }

        .layui-tree-skin-sidebar li a {
            height: 45px;
            border-left: 5px solid transparent;
            box-sizing: border-box;
            width: 100%;
        }

        .layui-tree-skin-sidebar li a:hover {
            background: #4E5465;
            color: #fff;
            border-left: 5px solid #009688;
        }

        .layui-tree-skin-sidebar li a.active {
            background: #009688;
        }
    </style>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo">后台管理系统</div>
        <!-- 头部区域（可配合layui已有的水平导航） -->
        <ul class="layui-nav layui-layout-left">
            <li class="layui-nav-item"><a href=""></a></li>
            <li class="layui-nav-item"><a href=""></a></li>
        </ul>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item"><a href="<%=request.getContextPath()%>/exit">退了</a></li>
        </ul>
    </div>

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <div id="sidemenubar" lay-filter="test"></div>
        </div>
    </div>

    <div class="layui-body">
        <!-- 内容主体区域 -->
        <div class="layui-tab layui-tab-card" lay-filter="demo" lay-allowClose="true">
            <ul class="layui-tab-title">
                <li class="layui-this">welcome</li>
            </ul>
            <div class="layui-tab-content" style="width:100%;height: 550px;">
                <div class="layui-tab-item layui-show">欢迎使用</div>
            </div>

        </div>
    </div>

    <div class="layui-footer">
        <!-- 底部固定区域 -->
        © layui.com - 底部固定区域
    </div>
</div>

<!--layui.js文件必须放到HTML内容的最后-->
<script src="<%=request.getContextPath()%>/static/layui2.4/layui.js"></script>
<script src="<%=request.getContextPath()%>/static/jquery/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
    $.ajax({
        type: 'post'
        , data: ""
        , url: 'loginJson'
        , async: false
        , dataType: 'json'
        , success: function (data) {
            var menuData = eval(data.map.data);
            start(toArray(menuData))
        }
    });

    function toArray(menuData) {
        var array = new Array();
        for (var i = 0; i < menuData.length; i++) {
            array.push(menuData[i]);
        }
        return array
    }

    function start(menuDate) {
        var menuData = menuDate;
        layui.use(['element', 'tree'], function () {
            var element = layui.element;
            var $ = layui.$;
            var data1 = [{
                "name": "权限管理",
                "id": "1",
                "url": null,
                "children": [{"name": "菜单管理", "id": '2', "url": "./menuView"}, {
                    "name": "角色管理",
                    "id": '3',
                    "url": "./roleView"
                }]
            }, {
                "name": "用户管理",
                "id": '4',
                "url": null,
                "children": [{"name": "用户管理", "id": '5', "url": "./userView"}]
            }];
            element.on('tab(demo)', function (data) {
            });
            console.log(menuData)
            layui.tree({
                elem: '#sidemenubar' //传入元素选择器
                , skin: 'sidebar'  //自定义tree样式的类名
                , nodes: menuData //节点数据
                , click: function (node, item) {
                    //node即为当前点击的节点数据,item就是被点击的a标签对象了
                    //导航按钮选中当前
                    $('#sidemenubar a').removeClass('active');
                    $(item).addClass('active');
                    $(item).siblings('.layui-tree-spread').click();
                    //添加新tab
                    activeTab.init(node.name, node.url, node.id);
                }
            });

            var activeTab = {
                tabTit: '', //tab titile标题
                tabUrl: '', //tab内容嵌套iframe的src
                tabId: '', //tab 标签的lay-id
                tabCon: function () {
                    var result;
                    $.ajax({
                        type: 'get',
                        url: this.tabUrl,
                        dataType: 'html',
                        success: function (data) {
                            result = data;
                        }
                    })
                    return result;
                },
                addTab: function () { //新增tab项
                    element.tabAdd('demo', {
                        title: this.tabTit
                        ,
                        content: '<iframe frameborder="no" border="0" style="width:100%" height="550px" src = ' + this.tabUrl + ' ></iframe>' //支持传入html
                        ,
                        id: this.tabId
                    })
                },
                changeTab: function () { //选中tab项
                    element.tabChange('demo', this.tabId);
                },
                ishasTab: function () { //判断tab项中是否包含
                    var _this = this;
                    var dataId, isflag;
                    var arrays = $('.layui-tab-title li');
                    $.each(arrays, function (idx, ele) {
                        dataId = $(ele).attr('lay-id');
                        if (dataId == _this.tabId) {
                            isflag = true
                            return false
                        } else {
                            isflag = false
                        }
                    })
                    return isflag
                },
                init: function (tabtit, taburl, tabid) {
                    var _this = this;
                    _this.tabUrl = taburl;
                    _this.tabId = tabid;
                    _this.tabTit = tabtit;
                    if (taburl) {
                        if (!_this.ishasTab()) {
                            _this.addTab();
                        }
                        _this.changeTab();
                    } else {
                        return false
                    }
                }
            }
        });
    }
</script>
</body>
</html>
